<script setup>
import {
  ClockCircleOutlined,
  SwapLeftOutlined,
  RedoOutlined,
} from "@ant-design/icons-vue";
import { reactive, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { columns } from "./index.js";
import request from "@/common/utils/request";

const formState = reactive({
  // 生成状态
  status: "all",
  // 产品或公司
  product_name: "",
  // 创建人
  operator_id: "all",
  // 开始结束时间
  start_time: "",
  end_time: "",
});

const state = reactive({
  operatorList: [],
  // 创建时间
  chuangjianshijian: [],
  // 分页数据
  tableData: {
    page: 1,
    pageSize: 10,
    total: 0,
  },
  // table loding
  loading: false,
  // 列表数据
  dataSource: [],
});
// table 分页数据
const pagination = computed(() => ({
  total: state.tableData.total,
  current: state.tableData.page,
  pageSize: state.tableData.pageSize,
  pageSizeOptions: ["10", "20", "50", "100"],
  showSizeChanger: true,
}));

onMounted(() => {
  getOperatorList();
  getList();
});

// 获取筛选项 创建人
const getOperatorList = async () => {
  const res = await request.get("/work_ai", `/user/team/user/all`);
  console.log(res, "创建人");
  state.operatorList = [
    {
      name: "全部",
      id: "all",
    },
    ...res.result,
  ];
};

// 获取列表数据
const getList = async () => {
  state.loading = true;

  try {
    const res = await request.get(
      "/work_ai",
      `/user/shotstack/text/imitation/list`,
      {
        page: pagination.value.current,
        pageSize: pagination.value.pageSize,
        ...formState,
        status: formState.status == "all" ? null : formState.status,
        operator_id:
          formState.operator_id == "all" ? null : formState.operator_id,
      }
    );
    console.log(res, "仿写列表");
    state.dataSource = res.result.data;
    state.tableData.total = res.result.total;
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};

const serchFn = (event) => {
  console.log(event, "事件对象");

  state.tableData.page = 1;
  state.tableData.pageSize = 10;
  getList();
};

// 时间搜索条件改变
const timeChange = (date, dateString) => {
  console.log(date + "date", dateString + "dateString");
  if (Array.isArray(dateString) && dateString.length) {
    state.chuangjianshijian = dateString;
    formState.start_time = dateString[0];
    formState.end_time = dateString[1];
  } else {
    state.chuangjianshijian = [];
    formState.start_time = "";
    formState.end_time = "";
  }
};

// table change
const handleTableChange = (pag, filters, sorter) => {
  console.log(pag, filters, sorter);
  state.tableData.page = pag.current;
  state.tableData.pageSize = pag.pageSize;
  getList();
};

// 重置搜索条件
const resetQuery = () => {
  Object.assign(formState, {
    // 生成状态
    status: "all",
    // 产品或公司
    product_name: "",
    // 创建人
    operator_id: "all",
    // 开始结束时间
    start_time: "",
    end_time: "",
  });
  state.chuangjianshijian = [];
  getList();
};

const toView = (record) => {
  console.log(record, "此项的详情");
  //   return;
  router.push({
    name: "CopywritingFissionDetail",
    query: {
      id: record.id,
    },
    params: {
      record,
    },
  });
};

const delItem = async (id) => {
  const res = await request.del(
    "/work_ai",
    `/user/shotstack/text/imitation/delete?id=${id}`
  );
  console.log(res, "删除结果");
  getList();
};

const isBack = () => {
  router.push({
    name: "TextImitation",
  });
};
</script>

<template>
  <div class="TextImitationList">
    <div class="title_box">
      <div class="left_title_box">
        <span class="back_text" @click="isBack"
          ><SwapLeftOutlined style="margin-right: 3px" />返回</span
        >
        <h2>历史记录</h2>
      </div>
    </div>

    <div class="content_box">
      <div class="serch_box">
        <div class="form_items">
          <div class="form_item">
            <a-radio-group v-model:value="formState.status" @change="serchFn">
              <a-radio-button value="all">全部</a-radio-button>
              <a-radio-button :value="0">生成中</a-radio-button>
              <a-radio-button :value="1">已完成</a-radio-button>
              <a-radio-button :value="2">生成失败</a-radio-button>
            </a-radio-group>
          </div>

          <div class="form_item">
            <span class="is_lable">产品或公司：</span>
            <a-input
              v-model:value="formState.product_name"
              allowClear
              :maxlength="50"
              style="width: 249px"
              placeholder="请输入产品或公司"
              @change="(e) => e.type == 'click' && serchFn()"
            >
            </a-input>
          </div>

          <div class="form_item">
            <span class="is_lable">创建人：</span>
            <a-select
              ref="select"
              v-model:value="formState.operator_id"
              :options="state.operatorList"
              :field-names="{ label: 'name', value: 'id', options: 'children' }"
              :showArrow="true"
              style="width: 249px"
              @focus="focus"
              placeholder="请选择或输入创建人"
              @change="handleChange"
            >
            </a-select>
          </div>

          <div class="form_item">
            <span class="is_lable">创建时间：</span>
            <a-range-picker
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              v-model:value="state.chuangjianshijian"
              @change="timeChange"
            />
          </div>
        </div>
        <div class="is_serch">
          <a-button type="primary" @click="serchFn">搜索</a-button>
          <a-button type="link" @click="resetQuery">
            <RedoOutlined />
            重置</a-button
          >
        </div>
      </div>

      <div class="table_box">
        <!-- state.dataSource -->
        <a-table
          :columns="columns"
          :data-source="state.dataSource"
          :pagination="pagination"
          :loading="state.loading"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'edit'">
              <a-button type="link" @click="toView(record)">查看</a-button>
              <a-popconfirm
                title="确定要删除此项吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delItem(record.id)"
              >
                <a-button type="link">删除</a-button>
              </a-popconfirm>
            </template>
            <template v-if="column.dataIndex === 'wafg'">
              <span> 文案仿写 </span>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@radius: 8px;
@gap: 15px;
.TextImitationList {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 1450px;
  .title_box {
    display: flex;
    justify-content: space-between;
    padding: 10px @gap;

    background-color: #fff;
    border-radius: @radius;
    .left_title_box {
      display: flex;
      gap: 10px;
      align-items: center;
      width: 200px;
      h2 {
        margin: 0;
        font-weight: 600;
        font-size: 16px;
      }
      .back_text {
        color: #767b98;
        transition: all 0.3s;
        cursor: pointer;
        position: relative;
        margin-right: 14px;
        &:hover {
          color: var(--ss-primary-color-hover);
        }
        &::after {
          content: "";
          position: absolute;
          right: -13.5px;
          top: 3.5px;
          width: 0.5px;
          height: 16px;
          background-color: #767b98;
        }
      }
    }
  }

  .content_box {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: @gap;
    background-color: #fff;
    border-radius: @radius;
    height: 100%;
    .serch_box {
      .form_items {
        display: flex;
        gap: 25px;
        .form_item {
          display: flex;
          align-items: center;
          span {
            font-size: 14px;
            color: rgba(43, 43, 61, 0.85);
          }
        }
      }

      .is_serch {
        margin-top: 20px;
      }
    }
  }
}
</style>
